{% extends "base1.html"%}
 {% block middle %}

    <div class="template">
  <div class="box">
{#    <h3>#}
{#      <p><span>个人博客</span>苹果的博客</p>#}
{#    </h3>#}

  </div>
</div>
     <style>
{#.divcss5{ border:1px dashed #a09ba2; width:1000px}#}
{#     .article_info .title {#}
{#    margin-bottom: 20px;#}
{# }#}
canvas{position: relative;
    z-index: -1;}
#div_digg {
    float: right;
    margin-bottom: 10px;
    margin-right: 30px;
    font-size: 12px;
    width: 125px;
    text-align: center;
    margin-top: 10px;
}

/* 推荐 */
.diggit {
    float: left;
    width: 46px;
    height: 52px;
    background: url('/static/font/upup.gif') no-repeat;
    text-align: center;
    cursor: pointer;
    margin-top: 2px;
    padding-top: 5px;
}

/* 反对 */
.buryit {
    float: right;
    margin-left: 20px;
    width: 46px;
    height: 52px;
    background: url('/static/font/downdown.gif') no-repeat;
    text-align: center;
    cursor: pointer;
    margin-top: 2px;
    padding-top: 5px;
}
.form-control{
    width: 900px;
}
.clear {
    clear: both;  /* 清除浮动，解决塌陷问题 */
}
     .cate{
         color:#96a29d;
         {#float: right;#}
         margin-left: 400px;
     }

.money{
    float: right;
    right:0;
    position:fixed;
    bottom:400px;
    width:40px;
    background:#369
}

/* 弹窗 (background) */
.modal {
    float: right;
    left: 1050px;
    outline: 0 none;
    text-decoration: none;
    outline-color: initial;
    {#outline-style: none;#}
    outline-width: 0px;

    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    z-index: 1; /* 设置在顶层 */
    right: 10px;
    {#top: 0;#}
    width: 440px;
    height: 452px;
    {#overflow: auto;#}
    {#background-color: rgb(0,0,0);#}
    {#background-color: rgba(0,0,0,0.4);#}
}

/* 弹窗内容 */
.modal-content {
    height: 139%;
    background-color: #fefefe;
    margin: 25% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 35%;
}

/* 关闭按钮 */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

</style>

<article>
<div class="center">
<div class="divcss5">
    <div class="content-body">
    <div class="container">
        <div class="row">
{#            <main class="col-md-8">#}
{#                <article class="post post-1">#}
                    <header class="entry-header">
                        <h1 class="entry-title" hid="{{ text.hid }}">{{ text.title }}</h1>
                    <div class="cate">
    分类: {{ cate_name.category_name }}  时间: {{ edit_time }}  阅读: {{ info_count }} 评论：{{ comments.count }}
    </div><br>
    <div class="postbody">
    <div class="entry-content clearfix">
                      {{ text.detail|safe}}
                    </div>
</div>

{# 文章点赞 #}
{% csrf_token %}
    <div id="div_digg">
{#         推荐#}
        <div class="diggit action">
            <span class="diggnum" id="digg_count">{{ text.like_count }}</span>
        </div>
{#         点灭#}
        <div class="buryit action">
            <span class="diggnum" id="bury_count">{{ text.unlike_count }}</span>
        </div>
        <div class="clear"></div>
        <div class="diggword" id="digg_tips" style="color: red;"></div>
    </div>
<div>

    <script type="text/javascript"  src="/static/js/jquery/jquery.min.js"></script>
    <script>
            var hid = $('.entry-title').attr('hid')
            $('.action').click(function () {
                var $index = $(this).index()
                var isUp = $index ? false : true
               $.ajax({
                   url: '/digg/',
                   type: 'post',
                   dataType: 'json',
                   data: {
                       'is_up': isUp,
                       'hid': hid
                   },
                   {#success(res) {#}
                   {#    console.log(res)#}
                   success:function (res) {
                     console.log(res);
                     if (res.state){
                         if (isUp){
                             var val = parseInt($("#digg_count").text());
                             $("#digg_count").text(val+1);
                         }else{
                             var val = parseInt($("#bury_count").text());
                             $("#bury_count").text(val+1);
                         }

                     }else {
                         if (res.handled){
                             $("#digg_tips").html('您已点过赞')
                         }else{
                             $("#digg_tips").html('您已点反对')
                         }
                         setTimeout(function () {
                             $("#digg_tips").html('')

                         },1500)
                     }

                   },
               })
            })
    </script>

{#    # 评论功能#}
    <div id = "comment">
    <form action="/comment/post_comment/{{ hid }}/" method="post">
        {% csrf_token %}
        <div class="form-group">
            <label for="body">
            </label>
           评论：<textarea type="text" class="form-control" id="id" name="body" rows="2"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">发送</button>
    </form>

</div>
<div class="comment">
{#    <br><h4>共有{{ comments.count }}条评论</h4>#}
    <div>
        {% for comment in comments %}
            <hr>
            <p>
                <strong style="color: #7c8ea2">
                   游客（{{ comment.user_ip }}）
                </strong> 于
                <span style="color: #82a288">
                    {{ comment.created|date:"Y-m-d H:i:s" }}
                </span> 评论：
            </p>
            <pre style="font-family: inherit; font-size: 1em;">{{ comment.body }}</pre>
            <a href="/comment/del_comment/{{ comment.id }}/{{ comment.hid }}/"><span><font color="#96A29D">撤回评论</font></span></a>
        {% endfor %}
    </div>
</div>
</article>
<script src="/static/js/jquery.particleground.min.js"></script>
     <script>
    $(document).ready(function () {
        $('#particles').particleground({
            particleRadius: 4,
            density: 35000,
            dotColor: '#000000',
            lineColor: '#2b2b2b',
            minSpeedX: 0.5,
            maxSpeedX: 1.0,
            minSpeedY: 0.5,
            maxSpeedY: 1.0,
           directionX: 'center',
           directionY: 'center',
           proximity: 30
        });
        $('.intro').css({
            'margin-top': -($('.intro').height())
        });
    });
</script>

<script type="text/javascript"  src="/static/js/silder.js"></script>
<!-- 打开弹窗按钮 -->
{#<button id="myBtn">打赏</button>#}
     <button id="myBtn" type="submit" class="money btn-primary">打赏</button>

<!-- 弹窗 -->
<div id="myModal" class="modal">

  <!-- 弹窗内容 -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>扫描支付宝二维码 <img src="/static/images/企业微信截图_6404df3d-e734-421f-8b30-cddf7f9c8790.png"></p>
      <p>扫描微信二维码 <img src="/static/images/企业微信截图_7623f537-a6d0-4677-b601-f08689dc45c3.png"></p>
  </div>
<script>
    // 获取弹窗
var modal = document.getElementById('myModal');

// 打开弹窗的按钮对象
var btn = document.getElementById("myBtn");

// 获取 <span> 元素，用于关闭弹窗
var span = document.querySelector('.close');

// 点击按钮打开弹窗
btn.onclick = function() {
    modal.style.display = "block";
}

// 点击 <span> (x), 关闭弹窗
span.onclick = function() {
    modal.style.display = "none";
}

// 在用户点击其他地方时，关闭弹窗
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
<script src="/static/js/heart.js"></script>
<script></script>
</div>
{% endblock %}







